<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="../static/layui-2.3.0/css/layui.css"
	media="all">
<style type="text/css">
#form-user-query .layui-form-label {
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}
</style>
</head>

<body>
	<div style="padding: 0px 0 15px 0px;">
		<span class="layui-breadcrumb" lay-separator="-"> <a href="#">安全管理</a>
			<a><cite>用户管理</cite></a>
		</span>
	</div>
	<div style="padding-top:10px">
		<!-- 查询表单 -->
		<form class="layui-form" id="form-user-query">
			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select name="u_status" lay-verify="required"
							lay-filter="select-user-query-user-status">
							<option value="">全部</option>
							<option value="00">未确定</option>
							<option value="22">确定</option>
							<option value="55">启用</option>
							<option value="77">禁用</option>
						</select>
					</div>


					<label class="layui-form-label">编号</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="u_id" autocomplete="off"
							class="layui-input">
					</div>

					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="u_name" autocomplete="off"
							class="layui-input">
					</div>

					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" name="u_pwd" autocomplete="off"
							class="layui-input">
					</div>

					<button class="layui-btn" id="bn-user-query">
						<i class="layui-icon layui-icon-search"></i> 查询
					</button>

				</div>
			</div>
		</form>
	</div>

	<div class="layui-btn-container">
		<button type="button" class="layui-btn addrole" id="bn-user-add">
			<i class="layui-icon">&#xe608;</i> 新增
		</button>
		<button type="button" class="layui-btn deleterole" id="bn-user-cfm">
			<i class="layui-icon layui-icon-ok-circle"></i> 确定
		</button>
		<button type="button" class="layui-btn" id="bn-user-use">
			<i class="layui-icon layui-icon-auz"></i> 启用
		</button>
		<button type="button" class="layui-btn" id="bn-user-unuse">
			<i class="layui-icon layui-icon-fonts-del"></i> 禁用

		</button>
		<button class="layui-btn layui-btn-danger" id="bn-user-del-multi">
			<i class="layui-icon layui-icon-delete"></i> 删除
		</button>
	</div>
	<!-- 工具条自定义 -->
	<script type="text/html" id="barDemo">
{{# if(d.u_status ==  '00'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="user_edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="user_cfm"><i class="layui-icon layui-icon-ok-circle"></i> 确定</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="user_del"><i class="layui-icon layui-icon-delete"></i> 删除</a>

{{# }else if(d.u_status ==  '22'||  d.u_status ==  '77'){    }}
    <a class="layui-btn layui-btn-xs" lay-event="user_use"><i class="layui-icon layui-icon-auz"></i> 启用</a>
  	
{{# }else if(d.u_status ==  '55'){  }}
    <a class="layui-btn layui-btn-xs" lay-event="user_unuse"><i class="layui-icon layui-icon-fonts-del"></i> 禁用</a>	
	<a class="layui-btn layui-btn-xs" lay-event="user_role"><i class="layui-icon layui-icon-auz"></i> 添加角色</a>
{{# } }}
</script>

	<table id="info-user-table" lay-filter="userTable"></table>
	<!--  <script src="../static/js/sweetalert-2.1.0.min.js"></script> -->
	<script src="../static/js/jquery-3.3.1.min.js"></script>
	<script src="../static/layui-2.3.0/layui.js"></script>
	<script src="../static/js/sweetalert-2.1.0.min.js"></script>
	<script src="../static/js/popper-1.14.3.min.js"></script>
	<script src="../static/js/common.js"></script>

	<script>
		layui.use([ 'element', 'table', 'layer' ], function() {
			var table = layui.table;
			var layer = layui.layer; //声明layer
			var form = layui.form;
			//第一个实例
			var userTable = table.render({
				elem : '#info-user-table', //表格id
				//height : 315,
				url : 'user', //数据接口
				page : true, //开启分页
				limits : [ 5, 10, 20, 30 ],
				limit : 5,
				cols : [ [ //表头
					{
						type : 'checkbox'
					}
					,
					{
						field : 'u_id',
						title : '用户编号',
						sort : 'true',
						align : 'center'
					}
					, {
						field : 'u_name',
						title : '用户名',
	
						align : 'center'
					}
					, {
						field : 'u_pwd',
						title : '用户密码',
	
						align : 'center'
					}
					, {
						field : 'u_status',
						title : '用户状态',
	
						align : 'center'
					}
					, {
						title : '操作',
						width : 400,
						align : 'center',
						toolbar : '#barDemo'
					}
				] ]
			});
	
	
			//监听工具条
			table.on('tool(userTable)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象
	
				if (layEvent === 'user_cfm') { //确定
				
					//优化1.1
					 opr.ajaxWithConfirm({
						title : "您确实要确定该条数据吗?",
						text : "数据一旦确定将无法编辑!",
						url : 'user/status/' + data.u_id + "/22",
						method : 'put',
						layer : layer,
						layuiTableIns : userTable
					}); 
	
	
				} else if (layEvent === 'user_use') { //启用

					 opr.ajaxWithConfirm({
						title : "您确实要启用该条数据吗?",
						url : 'user/status/' + data.u_id + "/55",
						method : 'put',
						layer : layer,
						layuiTableIns : userTable
					}); 
	
				} else if (layEvent === 'user_unuse') { //禁用

					 opr.ajaxWithConfirm({
						title : "您确实要禁用该条数据吗?",
						url : 'user/status/' + data.u_id + "/77",
						method : 'put',
						layer : layer,
						layuiTableIns : userTable
					}); 
	
				} else if (layEvent === 'user_del') { //删除
	
					//优化1.1
					opr.ajaxWithConfirm({
						title : "您确实要删除该条数据吗?",
						text : "数据一旦删除将无法恢复!",
						url : 'user/' + data.u_id,
						method : 'delete',
						layer : layer,
						layuiTableIns : userTable
					}); 
	
					
	
	
				}else if (layEvent === 'user_role') {//权限
					 $.ajax({
						url : 'user/role_to/' + data.u_id,
						method : 'get',
						dataType : 'html'
					}).done(function(html) {
						layerIdx = layer.open({
							type : 1,
							title : data.u_name + '角色的权限',
							area : [ '800px', '540px' ],
							content :html,
							zIndex : 100 //将层次降低，以使sweetalert能够在layer之上
						});
						form.render(null, 'form-user-role');//手动渲染
	
					});
					return false; 
	
				} else if (layEvent === 'user_edit') { //编辑
					$("#bn-upd").show();
					$("#bn-add").hide();
					$("#userID").hide();
					
					//优化1.1
					opr.ajax({
						url : 'user/' + data.u_id,
						method : 'get',
						layer : layer,
						responseOkHandler : function(user) {
							//form-cus-upd是表单的lay-filter值
							form.val("form-user-upd", user);
	
							layerID = layer.open({
								type : 1,
								title : '修改客户信息',
								area : [ '800px', '540px' ],
								content : $('#dom-win-user-upd'),
								zIndex : 100 //将层次降低，以使sweetalert能够在layer之上
							});
	
						}
					});
	
	
					//修改
					form.on('submit(udpGo)', function(data) {
						//优化1.1
						 opr.ajax({
							url : 'user',
							// data: data.field,
							data : JSON.stringify(data.field), //处理为json格式
							contentType : 'application/json;charset=UTF-8',
							method : 'put',
							dataType : 'json',
							layer : layer,
							layuiTableIns : userTable,
							responseOkHandler : function(result) { //关闭当前的模态框（修改必须要加添加）
								layer.close(layerID);
								return true; //返回true,继续默认后续行为
							}
						});
						return false;  
	
	
					});
				}
			});
	
	
	
	
	
			//批量修改状态
			$("#bn-user-cfm").click(function() { //确定
				changeMultiCusStatus('您确实要确定选择的用户信息吗？', '用户信息一旦被确定，将不能再被编辑！', '22', "info-user-table", userTable);
			});
			$("#bn-user-use").click(function() { //启用
				changeMultiCusStatus('您确实要启用选择的用户信息吗？', '！', '55', "info-user-table", userTable);
			});
			$("#bn-user-unuse").click(function() { //禁用
				changeMultiCusStatus('您确实要禁用选择的用户信息吗？', '用户信息一旦被禁用，将不能被使用！', '77', "info-user-table", userTable);
			});
	
			//批量修改封装方法
			function changeMultiCusStatus(title, text, status, tableID, Table) {
				var checkStatus = table.checkStatus(tableID); //基础参数id对应的值
				console.log(checkStatus.data) //获取选中行的数据(数组)
				//console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
				//console.log(checkStatus.isAll ) //表格是否全选
				if (checkStatus.data.length == 0) {
					swal({
						text : '您没有选择任何数据！',
						icon : "error",
						buttons : false,
						timer : 1500
					});
					return;
				}
				var arr = [];
				$.each(checkStatus.data, function() {
					arr.push(this.u_id);
				});
	
	
				//优化1.1
				opr.ajaxWithConfirm({
					title : title,
					text : text,
					url : 'user/status/' + status,
					data : JSON.stringify(arr),
					contentType : "application/json;charset=UTF-8",
					method : 'put',
					layer : layer,
					layuiTableIns : userTable
				});
	
			}
	
	
			//批量删除
			$("#bn-user-del-multi").click(function() {
				var checkStatus = table.checkStatus('info-user-table'); //test即为基础参数id对应的值
				console.log(checkStatus.data); //获取选中行的数据
				//console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
				//console.log(checkStatus.isAll ) //表格是否全选
				var arr = [];
				$.each(checkStatus.data, function() {
					arr.push(this.u_id);
				});
	
	
				//优化1.1
				opr.ajaxWithConfirm({
					url : 'user',
					data : JSON.stringify(arr),
					contentType : "application/json;charset=UTF-8",
					method : 'delete',
					dataType : 'json',
					title : "您确实要删除选择的数据吗?",
					text : "数据一旦删除将无法恢复!",
					layer : layer,
					layuiTableIns : userTable,
				});
	
			});
			var layerID;
	
			//点击新增按钮
			$('#bn-user-add').click(function() {
				//alert("新增");
				$("#bn-upd").hide();
				$("#bn-add").show();
				form.val("form-user-upd", {
					"u_id" : "", // "name": "value"
					"u_name" : "",
					"u_pwd" : ""
				});
	
	
				layerID = layer.open({
					type : 1,
					title : '新增用户信息',
					content : $('#dom-win-user-upd') //这里content是个普通的String
				});
	
			});
	
			form.on('submit(addGo)', function(data) {
				opr.ajax({
					url : 'user',
					data : data.field,
					method : 'post',
					layer : layer,
					layuiTableIns : userTable,
					responseOkHandler : function(result) {
						layer.close(layerID);
						return true; //返回true,继续默认后续行为						
					}
				});
				return false;
			});
	
			//监听select选择
			form.on('select(select-user-query-user-status)', function(data) {
				//console.log(data.elem); //得到select原始DOM对象
				//console.log(data.value); //得到被选中的值
				//console.log(data.othis); //得到美化后的DOM对象
				$('#bn-user-query').click();
	
			});
			//查询
			$('#bn-user-query').click(function() {
				//将表单参数转化为JSON对象
	
				var arr = $("#form-user-query").serializeArray();
				var params = {};
	
				for (var i = 0; i < arr.length; i++) {
					params[arr[i].name] = arr[i].value;
				}
				//传递查询参数重载表格（内部为ajax请求）
				userTable.reload({
					where : params,
					page : {
						curr : 1
					//重新从第 1 页开始
					}
				});
	
				showBns(); //重新显示按钮
				return false;
			});
			//显示按钮是否可用
			function showBns() {
				var _u_status = $('#form-user-query  select[name=u_status]').val();
				if (_u_status == '') {
					$('#bn-user-add,#bn-user-del-multi,#bn-user-cfm,#bn-user-use,#bn-user-unuse').prop('disabled', true).addClass("layui-btn-disabled");
				} else if (_u_status == '00') {
					$('#bn-user-add,#bn-user-del-multi,#bn-user-cfm').prop('disabled', false).removeClass("layui-btn-disabled");
					$('#bn-user-use,#bn-user-unuse').prop('disabled', true).addClass("layui-btn-disabled");
				} else if (_u_status == '22') {
					$('#bn-user-add,#bn-user-del-multi,#bn-user-cfm,#bn-user-unuse').prop('disabled', true).addClass("layui-btn-disabled");
					$('#bn-user-use').prop('disabled', false).removeClass("layui-btn-disabled");
				} else if (_u_status == '55') {
					$('#bn-user-add,#bn-user-del-multi,#bn-user-cfm,#bn-user-use').prop('disabled', true).addClass("layui-btn-disabled");
					$('#bn-user-unuse').prop('disabled', false).removeClass("layui-btn-disabled");
				} else if (_u_status == '77') {
					$('#bn-user-add,#bn-user-del-multi,#bn-user-cfm,#bn-user-unuse').prop('disabled', true).addClass("layui-btn-disabled");
					$('#bn-user-use').prop('disabled', false).removeClass("layui-btn-disabled");
				}
			}
			showBns();
	
	
		});
	</script>



	<!-- 修改表单 -->
	<div id="dom-win-user-upd"
		style="padding:20px; width:320px; display:none">
		<form class="layui-form" lay-filter="form-user-upd">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item" id="userID">
				<label class="layui-form-label">用户编号</label>
				<div class="layui-input-block">
					<input type="text" name="u_id" placeholder="请输入用户编号"
						style="width:200px" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="u_name" placeholder="请输入用户"
						style="width:200px" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户密码</label>
				<div class="layui-input-block">
					<input type="text" name="u_pwd" placeholder="请输入用户密码"
						style="width:200px" autocomplete="off" class="layui-input">
				</div>
			</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="bn-add" lay-submit lay-filter="addGo">立即提交</button>
					<button class="layui-btn" id="bn-upd" lay-submit lay-filter="udpGo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
	</div>

</body>
</html>
